<template>
    <div class="login">
        <div class="box">
            <div class="login-right">
               <form>
                   <label>Account</label><el-input @keypress.enter="submit()" class="username margin-bottom-20" v-model="username" placeholder='please input your account'></el-input>
                   <label>Password</label><el-input @keypress.enter="submit()" class="password margin-bottom-20" v-model="password" placeholder='password' show-password></el-input>
                   <el-button class="submit margin-bottom-20" type="primary" @click="submit()"  size="default">Login</el-button>
                    <span @click="toRegist()">Maybe you will regist one account.Regist</span>
               </form>
            </div>
            <div class="regist-left">
               <form>
                   <label>Account</label><el-input @keypress.enter="regist()" class="username margin-bottom-20" v-model="username" placeholder='please input your account'></el-input>
                   <label>Password</label><el-input @keypress.enter="regist()" class="password margin-bottom-20" v-model="password" placeholder='password' show-password></el-input>
                   <el-button class="submit margin-bottom-20" type="primary" @click="regist()"  size="default">Regist</el-button>
                    <span @click="toLogin()">If you have account.Login</span>
               </form>
            </div>
            <div :style="{transform:transform}" class="cover">
                <span class="big">Welcom to {{msg}}</span>
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
import { ElMessage } from 'element-plus'
export default {
    data() {
        return {
            username:'',
            password:'',
            transform:'',
            msg:'login'
        }
    },
    methods: {
        regist(){
            if(this.password == ''){
                ElMessage.warning({
                    message: '请输入密码',
                    type: 'warning'
                })
                return
            }
            if(this.username == ''){
                ElMessage.warning({
                    message: '请输入账户',
                    type: 'warning'
                })
                return
            }
            axios.post('http://127.0.0.1:3000/api/regist',{username:this.username,password:this.password}).then(res=>{
                console.log(res)
                if(res.data.code === 0){
                    ElMessage.success({
                        message: '注册成功',
                        type: 'success'
                    })
                   this.toLogin()
                }else{
                    ElMessage.error('注册失败');
                }
            }).catch(err=>{
                ElMessage.error('服务器链接失败');
            })
        },
        toRegist(){
            this.transform = 'translateX(100%)'
            this.msg = 'regist'
        },
        toLogin(){
            this.transform = 'translateX(0)'
            this.msg = 'login'
        },
        submit(){
            console.log(this.username)
            console.log(this.password)
            if(this.password == ''){
                ElMessage.warning({
                    message: '请输入密码',
                    type: 'warning'
                })
                return
            }
            if(this.username == ''){
                ElMessage.warning({
                    message: '请输入账户',
                    type: 'warning'
                })
                return
            }
            axios.post('http://127.0.0.1:3000/api/login',{username:this.username,password:this.password}).then(res=>{
                console.log(res)
                if(res.data.code === 0){
                    ElMessage.success({
                        message: '登录成功',
                        type: 'success'
                    })
                    //存入自定义token,保证已经登录,未进行安全验证
                    window.sessionStorage.setItem('token','testToken')
                    this.$router.push({
                        path:'/home',
                        query:{
                            username:this.username
                        }
                    })
                }else{
                    ElMessage.error('用户名密码错误');
                }
            }).catch(err=>{
                ElMessage.error('服务器链接失败');
            })
        }
    },
}
</script>
<style lang="less" scoped>
.cover{
    // transform:translateX(0);
    transition: 1s;
    // opacity: 0.8;
    position: relative;
    width: 50%;
    height: 100%;
    background-color: #66B1FF;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    .big{
        margin-bottom: 100px;
        display: block;
        font-size: 38px;
    }
}
form span:hover{
    color: #66B1FF;
    cursor:pointer;
}
form span{
    color: white;
}
.submit{
    width: 100%;
    margin-top: 20px;
}
form label{
    line-height: 20px;
    height: 20px;
    display: block;
    margin-bottom: 5px;
    color: #66B1FF;
}
.margin-bottom-20{
    margin-bottom: 20px;
}
.regist-left{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
    height: 100%;
    position: absolute;
    left: 0;
    margin-left: 5%;
}
.login-right{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
    height: 100%;
    position: absolute;
    right: 0;
    margin-right: 5%;
}
.box{
    position: relative;
    width: 1000px;
    height: 600px;
    box-shadow: 0 0 10px rgba(0,0,0,.2);
    background-color: rgba(225,225,225,.8);
}
.login{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
}
</style>